<script>
import { reactive } from "vue";
import { useTestnfo } from "./useTestnfo";
import { useTzRouter } from "@/vhooks/useTzRouter";

export default {
  name: "Truck",
  components: {},
  setup() {
    const state = reactive({
      disabled: false,
      isCheck: false,
      radioValue: 1,
    });
    const testInfoHook = useTestnfo(state);

    const { navigateBack, route } = useTzRouter();
    console.log(route);

    const handleSubmit = () => {
      /**
       * 回退页面
       */
      navigateBack({
        delta: 1, //回退的页面数，默认为1，可不写
        event: {
          type: "navigateBack", //事件类型 ，可以自己任意定义
          data: state, //回退的数据
        },
      });
    };

    return () => {
      return (
        <view class="truck">
          <form class="truck-form">
            {testInfoHook()}
            <view class="btn-area">
              <tz-button type="success" formType="submit">
                默认中等按钮
              </tz-button>
              <tz-button type="danger" formType="submit">
                type为danger按钮
              </tz-button>
              <tz-button size="large" formType="submit" onClick={handleSubmit}>
                默认大按钮
              </tz-button>
            </view>
          </form>
        </view>
      );
    };
  },
};
</script>

<style lang="scss">
.truck {
  width: 100%;
  height: 100%;
  .truck-form {
    display: flex;
    width: 100%;
    flex-direction: column;

    .btn-area {
      margin-top: 10px;
    }
  }
}
</style>
